<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>game canvas</title>
	<script src="lib.js"></script>
	<style>
		canvas {
			margin: 59px auto;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="arrow" width="400" height="400"></canvas>
</body>
	<script>
	var canvas = document.getElementById('arrow');
	var context = canvas.getContext('2d');
	var mouse = utils.captureMouse(canvas);
	var arrow = new Arrow();
	arrow.x = canvas.width/2;
	arrow.y = canvas.height/2;
	(function drawFrame(){
		window.requestAnimationFrame(drawFrame,canvas);
		context.clearRect(0,0,canvas.width,canvas.height);
		var dx = mouse.x - arrow.x;
		var dy = mouse.y - arrow.y;
		arrow.rotation = Math.atan2(dy,dx);
		arrow.draw(context);
	})()
	 
	</script>
</html>